<!--辐射工作人员登记表-->
<template>
    <Layout>
        <Form ref="form1" :model="dataToQuery" :label-width="120">
            <Row v-show="!switchFlag" class="query-form" >
                <Col span="8">
                    <FormItem label="单位名称：" prop="order">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>

                <Col span="8" offset="8">
                    <!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">

                <Col span="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                    <download-button :api="exportUrl" :queryForm="dataToQuery" />
                    <!-- <Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button> -->
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal :title="this.getModalTitle('辐射工作人员登记表')" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=800   class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false" :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?120:null" :label-position="mode === 'view'?'right':'top'">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='单位名称：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{ dataToView.companyName }}</div>
                                    <cascaderDom class="query-form-el" ref="companyQuery" :orgTree="true" v-else
                                                 :currentOrgId = "dataToView.companyId" style="width: 100%"
                                                 :setCurrentName="{label:dataToView.companyName, value:dataToView.companyId}"
                                                 @setOrgInfo='(data)=>{ if (data && data instanceof Array && data.length > 0 ) {this.$set(this.dataToView, "companyId", data[data.length - 1])}}'
                                                 @setOrgname='(data)=>{ if(data){this.$set(this.dataToView, "companyName", data)}}'></cascaderDom>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='姓名：' prop='name'>
                                    <div v-if="mode === 'view'">{{ dataToView.name }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写姓名" type='text' v-model='dataToView.name'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='性别：' prop='sex'>
                                    <div v-if="mode === 'view'">{{ dataToView.sex }}</div>
                                    <!--<Input v-else class='query-form-el' placeholder="请填写性别" type='text' v-model='dataToView.sex'></Input>-->
                                    <Select v-else v-model='dataToView.sex' placeholder="请填写性别" label-in-value class='query-form-el'>
                                        <Option value="男" lable="男">男</Option>
                                        <Option value="女" lable="女">女</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='工作岗位：' prop='jobs'>
                                    <div v-if="mode === 'view'">{{ dataToView.jobs }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写工作岗位" type='text' v-model='dataToView.jobs'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='辐射安全与防护培训时间：' prop='trainingTime'>
                                    <div v-if="mode === 'view'">{{ renderViewDate(dataToView.trainingTime) }}</div>
                                    <DatePicker v-else class="query-form-el" placeholder="请选择辐射安全与防护培训时间" v-model='dataToView.trainingTime' ></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem v-if="mode === 'view'" label="资格证书：">
                                    <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles">
                                        <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                                        <Progress  v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                    </div>
                                </FormItem>
                                <FormItem v-else label="资格证书：" prop="idFiles">
                                    <div>
                                        <Upload ref="upload"
                                                :before-upload="(file) => { beforeUpload(file, 'id') }"
                                                :show-upload-list="true"
                                                :max-size="10240"
                                                multiple
                                                type="drag"
                                                :action="fileUrl">
                                            <div style="padding: 10px">
                                                <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                                <p>点击将文件拖拽到这里上传</p>
                                                <!--<span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>-->
                                            </div>
                                        </Upload>
                                    </div>
                                    <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles" :key='item'>
                                        <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                                        <Button type="text" icon="md-trash" @click="removeFile(item.id, 'id')" style="margin-left: 5px;margin-bottom: 3px"/>
                                        <Progress  v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                        <!--<Progress  v-show="filePercentVisible[index]" :percent="filePercent[index]"></Progress>-->
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='备注：' prop='notes'>
                                    <div v-if="mode === 'view'">{{ dataToView.notes }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写备注" type='textarea' :autosize="{minRows:2,maxRows:5}" v-model='dataToView.notes'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填报人：' prop='createUserName'>
                                    <div v-if="mode === 'view'">{{ dataToView.createUserName }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写填报人" type='text' readonly v-model='dataToView.createUserName'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填报时间：' prop='createDate'>
                                    <div v-if="mode === 'view'">{{ renderViewDate(dataToView.createDate) }}</div>
                                    <DatePicker v-else class="query-form-el" placeholder="请选择填报时间" readonly v-model='dataToView.createDate' ></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填报人手机号：' prop='registrantPhone'>
                                    <div v-if="mode === 'view'">{{ dataToView.registrantPhone }}</div>
                                    <Input v-else class='query-form-el' placeholder="请填写填报人手机号" type='text' v-model='dataToView.registrantPhone'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11"></Col>
                        </Row>

                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>

    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {formatDate} from '@/tools/index'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage, cookie} from '@/common/cacheUtils.js';
    export default {
        components:{
            cascaderDom
        },
        data(){
            return{
                ...this.createCommonDataField(),
                fileUrl:Api.interestedPartiesUserFile,
                columns1: [
                    { title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'companyName',title: '单位名称',  align: 'center',minWidth: 200, },
                    { key:'name',title: '姓名',  align: 'center',minWidth: 120, },
                    { key:'sex',title: '性别',  align: 'center',minWidth: 120, },
                    { key:'jobs',title: '工作岗位',  align: 'center',minWidth: 120, },
                    { key:'trainingTime',title: '辐射安全与防护培训时间',  align: 'center',minWidth: 120,
                        render: (h,params)=>{return h('span',this.renderViewDate(params.row.trainingTime))}},
                    { key:'notes',title: '备注',  align: 'center',minWidth: 120, tooltip:true},
                    // { key:'createUserName',title: '填报人',  align: 'center',minWidth: 120, },
                    { key:'createDate',title: '填报时间',  align: 'center',minWidth: 120,
                        render: (h,params)=>{return h('span',this.renderViewDate(params.row.createDate))}},
                    // { key:'registrantPhone',title: '填报人手机号',  align: 'center',minWidth: 120, },
                    this.getActionColumns(),
                ],
                ruleCustom : {
                    companyId: [ { required: true, message: '请填写单位名称', trigger: 'change',}],
                    name: [ { required: true, message: '请填写姓名', trigger: 'change',}],
                    sex: [ { required: true, message: '请填写性别', trigger: 'change',}],
                    jobs: [ { required: true, message: '请填写工作岗位', trigger: 'change',}],
                    trainingTime: [ { required: true, message: '请填写辐射安全与防护培训时间', trigger: 'change',type:'date'}],
                    notes: [ { required: true, message: '请填写备注', trigger: 'change',}],
                    createUserName: [ { required: true, message: '请填写填报人', trigger: 'change',}],
                    createDate: [ { required: true, message: '请填写填报时间', trigger: 'change',type:'date'}],
                    registrantPhone: [ {
                        validator: (rule, value, callback) => {
                            if(!(/^1[3456789]\d{9}$/.test(this.dataToView.registrantPhone))){
                                callback(' ');
                                // this.$Message.error("请填写有效的的手机号")
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'blur'
                    }],
                    idFiles:[{
                        validator: (rule, value, callback) => {
                            if (this.dataToView.idFiles.length<1) {
                                callback('附件必须上传')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }]
                },
                tableHeight:10,
                dictMap: {},
                punishment: false,
                penaltyAmount:true,
                // api
                queryUrl:Api.queryEnTable.replace('{{table}}','RadiationWorkerRegistration'),
                exportUrl:Api.exportEnTable.replace('{{table}}','RadiationWorkerRegistration'),
                deleteUrl:Api.deleteEnTable.replace('{{table}}','RadiationWorkerRegistration'),
                getUrl:Api.getEnTable.replace('{{table}}','RadiationWorkerRegistration'),
                updateUrl:Api.updateEnTable.replace('{{table}}','RadiationWorkerRegistration'),
                saveUrl:Api.saveEnTable.replace('{{table}}','RadiationWorkerRegistration'),

                currentUser: JSON.parse(sessionStorage('userId').get('userId')),
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() >= new Date();
                    }
                },
            }
        },
        async mounted() {
            this.setTableHeight();
            this.query();
        },
        methods:{
            ...pageCommonFunction,
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            query() {
                // if(this.dataToQuery.eventTypeIdsArrays) {
                //     this.dataToQuery.eventTypeIds = this.arrayToInFormat(this.dataToQuery.eventTypeIdsArrays)
                // }
                // this.dataToQuery.orgId = this.currentUser.companyId;
                this.queryAjax();
            },

            submit(name) {
                this.submitAjax(name);
            },
            createEmptyDataToAdd(){
                return {
                    createDate: new Date(),
                    createUserId: this.currentUser.userId,
                    createUserName:this.currentUser.userName,
                    id:this.get_uuid(),
                    idFiles:[],
                }
            },
            async afterDataToViewInit() {
                await this.getFiles('id');
            },
        },
        watch:{
        },
    }
</script>

<style lang='css' scoped>
    .ivu-form-item {
        padding-right: 20px;
    }

    .query-form-el, .ivu-date-picker, .ivu-input-wrapper {
        width: 100%;
    }

</style>

